import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { connect } from 'dva';
// import { connect } from 'dva';
import Essay from './essay';
import Evaluate from './evaluate';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Row, Col, Card, Icon, Tooltip, Form } from 'antd';
import styles from './index.less';
import ReactJson from 'react-json-view';

class ApiAccess extends Component {
  constructor() {
    super();
    this.state = {
      list: [{ name: '问答接口', key: '1' }, { name: '评价接口', key: '2' }],
      index: 0,
      robotid: '',
    };
  }

  componentDidMount() {
    const { currentUser } = this.props;
    this.setState({ robotid: currentUser.robotId });
  }

  pithButton = e => {

    this.setState({
      index: e,
    });
  };

  render() {
    const xButton = {
      color: ' #58cef9',
      backgroundColor: '#ffffff',
    };
    return (
      <PageHeaderWrapper>
        <Row className={styles.colorBackground}>
          <Col style={{ padding: 10 }} xs={24}>
            <div className={styles.title}>
              <span>云平台API简介</span>
              <span />
            </div>
          </Col>
        </Row>
        <Card bordered={false}>
          <p>
            云平台提供了一套RESTful
            API开放接口，开发者利用该接口可以快速将智能机器人接入到手机App或者Web网站。
          </p>
          <div style={{ height: 20 }} />
          <div style={{ width: 467 }} className={styles.accessslw}>
            <p>{`您的ROBOT_ID为:${this.state.robotid}`}</p>
          </div>
          <div style={{ height: 20 }} />
        </Card>
        <div style={{ height: 25 }} />
        <div className={styles.Buttonbig}>
          {this.state.list.map((item, index) => {
            return (
              <div
                onClick={() => this.pithButton(index)}
                key={index}
                style={index === this.state.index ? xButton : null}
                className={styles.xButton}
              >
                {item.name}
              </div>
            );
          })}
        </div>
        {this.state.index === 0 ? <Essay /> : <Evaluate />}
        {/*
        <Card
          bordered={false}
        >
          123
          </Card> */}
      </PageHeaderWrapper>
    );
  }
}

export default connect(({ user }) => ({
  // 全局数据
  currentUser: user.currentUser,
}))(Form.create()(ApiAccess));
